"use client";
import { useState,ChangeEvent,useRef } from 'react';
import Link from "next/link"
import { useSearchParams } from 'next/navigation';

//自我模拟考试
interface Question {
  id: number;
  content: string;
  type: "single" | "multiple";
  answer: string;
  analysis: string;
}
//自我模拟考试
interface PracticeRecord {
  id: number;
  type: string;
  date: string;
  correctRate: string;
  questions?: Question[];
  duration?: string;
  score?: string;
}

export default function CertificatesPage() {
  const [activeModule, setActiveModule] = useState('exam');

  // 导航配置
  const navItems = [
    {
      id: 'exam',
      title: '我要练题',
      icon: (
        <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
        </svg>
      )
    },
    {
      id: 'practice',
      title: '自我模拟考试',
      icon: (
        <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
      )
    },
    {
      id: 'daily-learning',
      title: '办证模拟考试',
      icon: (
        <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      )
    },
    {
      id: 'certificate-query',
      title: '证书查询',
      icon: (
        <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      )
    },
    {
      id: 'certificate-bufa',
      title: '证书补发',
      icon: (
        <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      )
    }
  ];

  // 模块内容组件
  const renderModuleContent = () => {
    switch (activeModule) {
      case 'exam':
        return <ExamContent />;
      case 'practice':
        return <PracticeContent />;
      case 'daily-learning':
        return <DailyLearningContent />;
      case 'certificate-query':
        return <CertificateQueryContent />;
      case 'certificate-bufa':
        return <CertificateBufaContent />;
      default:
        return <ExamContent />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* 左侧导航栏 - 固定 */}
      <div className="w-64 bg-white shadow-sm p-6  h-full ml-20 ">
        <h3 className="text-lg font-bold mb-6 border-b pb-2">学员中心</h3>
        <nav className="space-y-4">
          {navItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setActiveModule(item.id)}
              className={`block p-2 w-full text-left rounded transition ${
                activeModule === item.id ? 'bg-gray-100 font-medium' : 'hover:bg-gray-100'
              }`}
            >
              <div className="flex items-center">
                {item.icon}
                <span>{item.title}</span>
              </div>
            </button>
          ))}
        </nav>
      </div>

      {/* 右侧内容区域 */}
      <div className="flex-1 ml-10 p-8 mr-20">
        {renderModuleContent()}
      </div>
    </div>
  );
}

//自我模拟考试
function PracticeContent() {
  // 历史考试记录数据
  const practiceRecords: PracticeRecord[] = [
    { 
      id: 1, 
      type: "自我模拟考试", 
      date: "2023-05-10", 
      correctRate: "78%",
      duration: "90分钟",
      score: "78分"
    },
    { 
      id: 2, 
      type: "刷题练习", 
      date: "2023-05-12", 
      correctRate: "85%",
      duration: "60分钟",
      score: "85分"
    },
  ];

  // 模拟考试类型状态
  const [examType, setExamType] = useState<"manual" | "random" | "unique">("manual");
  // 考试设置状态
  const [duration, setDuration] = useState(90);
  const [showScore, setShowScore] = useState(true);
  const [allowReview, setAllowReview] = useState(true);
  const [answerMode, setAnswerMode] = useState<"full" | "oneByOne">("full");
  // 题目数据
  const [selectedQuestions, setSelectedQuestions] = useState<Question[]>([]);
  
  // 模拟题库数据
  const questionBank: Question[] = [
    { id: 1, content: "根据《广告法》规定，下列哪种广告用语是禁止使用的？", type: "single", answer: "A", analysis: "《广告法》第九条规定禁止使用'最佳'等绝对化用语" },
    { id: 2, content: "直播营销中关于价格标示的要求，以下哪项是正确的？", type: "single", answer: "B", analysis: "需标明真实原价，不得虚假标注" },
    { id: 3, content: "消费者权益保护法规定的'七日无理由退货'适用于以下哪种商品？", type: "single", answer: "C", analysis: "定制商品、鲜活易腐商品等除外" },
  ];

  // 组卷方式选项
  const examTypes = [
    { value: "manual", label: "选题组卷", description: "手动选择题目组成试卷，所有学员答同一份试卷" },
    { value: "random", label: "抽题组卷", description: "设置抽题规则生成试卷，所有学员答同一份试卷" },
    { value: "unique", label: "随机组卷", description: "设置抽题规则，系统为每个学员单独生成一份试卷" },
  ];

  // 处理题目选择
  const handleQuestionSelect = (question: Question) => {
    if (selectedQuestions.some(q => q.id === question.id)) {
      setSelectedQuestions(selectedQuestions.filter(q => q.id !== question.id));
    } else {
      setSelectedQuestions([...selectedQuestions, question]);
    }
  };

  // 创建考试
  const handleCreateExam = () => {
    const newExam: PracticeRecord = {
      id: practiceRecords.length + 1,
      type: examType === "manual" ? "手动组卷考试" : examType === "random" ? "抽题组卷考试" : "随机组卷考试",
      date: new Date().toLocaleDateString(),
      correctRate: "0%",
      duration: `${duration}分钟`,
      score: "待考试"
    };
    
    // 这里应该调用API保存考试设置
    console.log("创建考试:", {
      examType,
      duration,
      showScore,
      allowReview,
      answerMode,
      selectedQuestions
    });
    
    // 添加到历史记录(实际开发中应该从API获取)
    practiceRecords.unshift(newExam);
  };

  return (
    <div className="max-w-4xl mx-auto p-6 -ml-10">
      <h1 className="text-2xl font-bold mb-6">自我模拟考试</h1>
      
      {/* 组卷方式选择 */}
      <div className="mb-8 ">
        <h2 className="text-lg font-semibold mb-4">1. 选择组卷方式</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {examTypes.map((type) => (
            <div 
              key={type.value}
              onClick={() => setExamType(type.value as any)}
              className={`border rounded-lg p-4 cursor-pointer transition ${
                examType === type.value ? "border-blue-500 bg-blue-50" : "hover:shadow-md"
              }`}
            >
              <h3 className="font-medium">{type.label}</h3>
              <p className="text-sm text-gray-600 mt-2">{type.description}</p>
            </div>
          ))}
        </div>
      </div>

      {/* 选题组卷界面 */}
      {examType === "manual" && (
        <div className="mb-8">
          <h2 className="text-lg font-semibold mb-4">2. 选择题目</h2>
          <div className="border rounded-lg p-4 max-h-96 overflow-y-auto">
            {questionBank.map((question) => (
              <div 
                key={question.id}
                onClick={() => handleQuestionSelect(question)}
                className={`p-3 mb-2 rounded cursor-pointer ${
                  selectedQuestions.some(q => q.id === question.id)
                    ? "bg-blue-100 border border-blue-300"
                    : "hover:bg-gray-50"
                }`}
              >
                <div className="flex items-start">
                  <input
                    type="checkbox"
                    checked={selectedQuestions.some(q => q.id === question.id)}
                    readOnly
                    className="mt-1 mr-2"
                  />
                  <div>
                    <p className="font-medium">{question.content}</p>
                    <p className="text-sm text-gray-500 mt-1">题型: {question.type === "single" ? "单选题" : "多选题"}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 抽题规则设置 (随机组卷和抽题组卷共用) */}
      {(examType === "random" || examType === "unique") && (
        <div className="mb-8">
          <h2 className="text-lg font-semibold mb-4">2. 设置抽题规则</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 border rounded-lg p-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">合规基础</label>
              <input type="number" min="0" className="w-full border rounded px-3 py-2" placeholder="题数" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">直播法规</label>
              <input type="number" min="0" className="w-full border rounded px-3 py-2" placeholder="题数" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">广告法</label>
              <input type="number" min="0" className="w-full border rounded px-3 py-2" placeholder="题数" />
            </div>
          </div>
        </div>
      )}

      {/* 考试设置 */}
      <div className="mb-8">
        <h2 className="text-lg font-semibold mb-4">3. 考试设置</h2>
        <div className="space-y-4 border rounded-lg p-4">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-gray-700">考试时长(分钟)</label>
            <input 
              type="number" 
              value={duration}
              onChange={(e) => setDuration(Number(e.target.value))}
              min="1"
              className="w-20 border rounded px-3 py-2"
            />
          </div>
          
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-gray-700">作答模式</label>
            <div className="flex space-x-4">
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  checked={answerMode === "full"}
                  onChange={() => setAnswerMode("full")}
                  className="mr-2"
                />
                <span>整卷作答</span>
              </label>
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  checked={answerMode === "oneByOne"}
                  onChange={() => setAnswerMode("oneByOne")}
                  className="mr-2"
                />
                <span>逐题作答</span>
              </label>
            </div>
          </div>
          
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-gray-700">成绩显示</label>
            <div className="flex space-x-4">
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  checked={showScore}
                  onChange={() => setShowScore(true)}
                  className="mr-2"
                />
                <span>自动出分</span>
              </label>
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  checked={!showScore}
                  onChange={() => setShowScore(false)}
                  className="mr-2"
                />
                <span>人工批改</span>
              </label>
            </div>
          </div>
          
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-gray-700">考后查看试卷</label>
            <div className="flex space-x-4">
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  checked={allowReview}
                  onChange={() => setAllowReview(true)}
                  className="mr-2"
                />
                <span>允许查看</span>
              </label>
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  checked={!allowReview}
                  onChange={() => setAllowReview(false)}
                  className="mr-2"
                />
                <span>禁止查看</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      {/* 创建考试按钮 */}
      <button
        onClick={handleCreateExam}
        className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
      >
        创建模拟考试
      </button>

      {/* 历史考试记录 */}
      {/* <div className="mt-12">
        <h2 className="text-xl font-semibold mb-4">历史考试记录</h2>
        <div className="space-y-4">
          {practiceRecords.map((record) => (
            <div key={record.id} className="border rounded-lg p-4 hover:shadow-md transition">
              <div className="flex justify-between">
                <div>
                  <h3 className="font-medium">{record.type}</h3>
                  <p className="text-sm text-gray-600 mt-1">{record.date}</p>
                </div>
                <div className="text-right">
                  <span className="block text-sm">正确率: {record.correctRate}</span>
                  <button className="text-blue-600 text-sm hover:underline mt-1">查看详情</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div> */}
    </div>
  );
}

//我要练题
function ExamContent() {
  // 练习计划状态
  const [showPlanModal, setShowPlanModal] = useState(false);
  const [planType, setPlanType] = useState<'manual' | 'random'>('manual');
  const [planDuration, setPlanDuration] = useState<'short' | 'medium' | 'long'>('short');
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [showReviewModal, setShowReviewModal] = useState(false);
  const [showResultSettings, setShowResultSettings] = useState(false);
  const [showQuestionAnalysis, setShowQuestionAnalysis] = useState(false);
  
  // 练习设置
  const [requireVideo, setRequireVideo] = useState(false);
  const [showStats, setShowStats] = useState({
    correctCount: true,
    beatRate: true,
    rank: true,
    totalAccuracy: true,
    totalBeatRate: true,
    leaderboard: true
  });

  // 模拟数据
  const questionTags = [
    "合规基础", "直播法规", "广告法", "消费者权益", 
    "数据安全", "知识产权", "反不正当竞争", "合同法"
  ];

  const practicePlans = [
    {
      id: 1,
      name: "合规基础30天提升计划",
      type: "manual",
      duration: "short",
      progress: "12/30",
      accuracy: "78%",
      status: "进行中"
    },
    {
      id: 2,
      name: "直播法规90天精通",
      type: "random",
      duration: "medium",
      progress: "90/90",
      accuracy: "85%",
      status: "已完成"
    }
  ];

  const practiceRecords = [
    {
      id: 1,
      title: "合规基础专项练习",
      date: "2023-06-15",
      questions: 20,
      correct: 16,
      accuracy: "80%",
      beatRate: "75%",
      rank: "32/150",
      duration: "25分钟"
    }
  ];

  const leaderboard = [
    { rank: 1, name: "张三", accuracy: "95%", beatRate: "98%" },
    { rank: 2, name: "李四", accuracy: "92%", beatRate: "96%" }
  ];

  const questionAnalysis = [
    {
      id: 1,
      content: "根据《广告法》规定，下列哪种广告用语是禁止使用的？",
      yourAnswer: "最佳",
      correctAnswer: "最佳",
      timeSpent: "32秒",
      status: "已掌握",
      analysis: "《广告法》第九条规定禁止使用'国家级'、'最高级'、'最佳'等用语"
    },
    {
      id: 2,
      content: "直播营销中关于价格标示的要求，以下哪项是正确的？",
      yourAnswer: "可随意标注原价",
      correctAnswer: "需标明真实原价",
      timeSpent: "45秒",
      status: "需加强",
      analysis: "根据《价格法》规定，经营者应当如实标注商品价格，不得虚假标价"
    }
  ];

  // 处理标签选择
  const handleTagSelect = (tag: string) => {
    setSelectedTags(prev => 
      prev.includes(tag) 
        ? prev.filter(t => t !== tag) 
        : [...prev, tag]
    );
  };

  // 创建练习计划
  const handleCreatePlan = () => {
    // 这里处理创建计划的逻辑
    console.log({
      planType,
      planDuration,
      selectedTags,
      requireVideo,
      showStats
    });
    setShowPlanModal(false);
  };

  return (
    <main className="min-h-screen bg-gray-50">
      <section className="py-8">
        <div className="container mx-auto px-4 max-w-[2400px] -ml-10 -mt-10">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
            {/* 左侧导航 */}
            <div className="lg:col-span-1 bg-white rounded-lg shadow-sm p-6">
              <h2 className="text-xl font-bold mb-4">练习导航</h2>
              <ul className="space-y-2">
                <li>
                  <button 
                    onClick={() => setShowPlanModal(true)}
                    className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded"
                  >
                    创建练习计划
                  </button>
                </li>
                <li>
                  <button 
                    onClick={() => setShowReviewModal(true)}
                    className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded"
                  >
                    练习回顾
                  </button>
                </li>
                <li>
                  <button 
                    onClick={() => setShowResultSettings(true)}
                    className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded"
                  >
                    结果页设置
                  </button>
                </li>
                <li>
                  <button 
                    onClick={() => setShowQuestionAnalysis(true)}
                    className="w-full text-left px-4 py-2 hover:bg-gray-100 rounded"
                  >
                    习题分析
                  </button>
                </li>
              </ul>
            </div>

            {/* 主内容区 */}
            <div className="lg:col-span-3 space-y-8">
              {/* 创建练习计划按钮 */}
              <div className="bg-white rounded-lg shadow-sm p-6 -ml-10">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-2xl font-bold">我要练题</h2>
                  <div className="flex space-x-4">
                    <button 
                      onClick={() => setShowPlanModal(true)}
                      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
                    >
                      创建练习计划
                    </button>
                    <Link href="/exams" className="px-4 py-2 border border-blue-600 text-blue-600 rounded hover:bg-blue-50 transition">
                      查看全部考试
                    </Link>
                  </div>
                </div>

                {/* 练习计划列表 */}
                <div className="mb-8">
                  <h3 className="text-lg font-semibold mb-4">我的练习计划</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {practicePlans.map(plan => (
                      <div key={plan.id} className="border rounded-lg p-4 hover:shadow-md transition">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="font-medium">{plan.name}</h4>
                            <span className="text-sm text-gray-600">
                              {plan.duration === 'short' ? '短期' : plan.duration === 'medium' ? '中期' : '长期'}计划 · 
                              {plan.type === 'manual' ? '手动选题' : '随机组题'}
                            </span>
                          </div>
                          <span className={`px-2 py-1 text-xs rounded ${
                            plan.status === '进行中' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'
                          }`}>
                            {plan.status}
                          </span>
                        </div>
                        <div className="mt-3 flex justify-between text-sm">
                          <span>进度: {plan.progress}</span>
                          <span>正确率: {plan.accuracy}</span>
                        </div>
                        <div className="mt-3 flex space-x-2">
                          <button className="text-blue-600 text-sm hover:underline">继续练习</button>
                          <button className="text-gray-600 text-sm hover:underline">查看详情</button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 练习记录 */}
                <div>
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold">练习记录</h3>
                    <button className="text-blue-600 hover:underline">导出全部记录</button>
                  </div>
                  
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">练习名称</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">日期</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">正确率</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">击败率</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">排名</th>
                          <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {practiceRecords.map(record => (
                          <tr key={record.id} className="hover:bg-gray-50">
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                              {record.title}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {record.date}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {record.accuracy}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {record.beatRate}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              {record.rank}
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                              <button className="text-blue-600 hover:underline mr-3">详情</button>
                              <button className="text-blue-600 hover:underline">导出</button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 创建练习计划模态框 */}
      {showPlanModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">创建自定义练习计划</h3>
              <button 
                onClick={() => setShowPlanModal(false)}
                className="text-gray-500 hover:text-gray-700"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            <div className="space-y-6">
              {/* 计划类型选择 */}
              <div>
                <h4 className="font-medium mb-2">1. 选择计划类型</h4>
                <div className="flex space-x-4">
                  <button
                    onClick={() => setPlanType("manual")}
                    className={`px-4 py-2 rounded border ${
                      planType === "manual" ? "bg-blue-100 border-blue-500 text-blue-700" : "border-gray-300"
                    }`}
                  >
                    手动选题
                  </button>
                  <button
                    onClick={() => setPlanType("random")}
                    className={`px-4 py-2 rounded border ${
                      planType === "random" ? "bg-blue-100 border-blue-500 text-blue-700" : "border-gray-300"
                    }`}
                  >
                    随机组题
                  </button>
                </div>
              </div>
              
              {/* 计划时长选择 */}
              <div>
                <h4 className="font-medium mb-2">2. 选择计划时长</h4>
                <div className="flex space-x-4">
                  <button
                    onClick={() => setPlanDuration("short")}
                    className={`px-4 py-2 rounded border ${
                      planDuration === "short" ? "bg-blue-100 border-blue-500 text-blue-700" : "border-gray-300"
                    }`}
                  >
                    短期 (30天)
                  </button>
                  <button
                    onClick={() => setPlanDuration("medium")}
                    className={`px-4 py-2 rounded border ${
                      planDuration === "medium" ? "bg-blue-100 border-blue-500 text-blue-700" : "border-gray-300"
                    }`}
                  >
                    中期 (90天)
                  </button>
                  <button
                    onClick={() => setPlanDuration("long")}
                    className={`px-4 py-2 rounded border ${
                      planDuration === "long" ? "bg-blue-100 border-blue-500 text-blue-700" : "border-gray-300"
                    }`}
                  >
                    长期 (180天)
                  </button>
                </div>
              </div>
              
              {/* 题目标签选择 */}
              <div>
                <h4 className="font-medium mb-2">3. 选择能力维度 (题目标签)</h4>
                <div className="flex flex-wrap gap-2">
                  {questionTags.map(tag => (
                    <button
                      key={tag}
                      onClick={() => handleTagSelect(tag)}
                      className={`px-3 py-1 rounded-full text-sm ${
                        selectedTags.includes(tag) ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-700"
                      }`}
                    >
                      {tag}
                    </button>
                  ))}
                </div>
              </div>
              
              {/* 先学习后练习选项 */}
              <div className="flex items-center">
                <input
                  type="checkbox"
                  id="pre-study"
                  checked={requireVideo}
                  onChange={() => setRequireVideo(!requireVideo)}
                  className="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
                <label htmlFor="pre-study" className="ml-2 block text-sm text-gray-700">
                  先学习后练习 (观看相关短视频后再开始练习)
                </label>
              </div>
              
              <div className="flex justify-end space-x-4 pt-4">
                <button
                  onClick={() => setShowPlanModal(false)}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  取消
                </button>
                <button
                  onClick={handleCreatePlan}
                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
                >
                  创建计划
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 练习回顾模态框 */}
      {showReviewModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">练习回顾 - 合规基础专项练习</h3>
              <button 
                onClick={() => setShowReviewModal(false)}
                className="text-gray-500 hover:text-gray-700"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            <div className="space-y-6">
              {questionAnalysis.map(question => (
                <div key={question.id} className="border rounded-lg p-4">
                  <div className="flex justify-between items-start">
                    <div>
                      <h4 className="font-medium">题目 {question.id}</h4>
                      <p className="mt-2">{question.content}</p>
                    </div>
                    <span className={`px-2 py-1 text-xs rounded ${
                      question.status === '已掌握' 
                        ? 'bg-green-100 text-green-800' 
                        : 'bg-red-100 text-red-800'
                    }`}>
                      {question.status}
                    </span>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                      <p className="text-sm text-gray-600">你的答案</p>
                      <p className={`mt-1 ${
                        question.yourAnswer === question.correctAnswer 
                          ? 'text-green-600' 
                          : 'text-red-600'
                      }`}>
                        {question.yourAnswer || '未作答'}
                      </p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600">正确答案</p>
                      <p className="mt-1 text-gray-800">{question.correctAnswer}</p>
                    </div>
                    <div>
                      <p className="text-sm text-gray-600">答题用时</p>
                      <p className="mt-1 text-gray-800">{question.timeSpent}</p>
                    </div>
                  </div>
                  
                  <div className="mt-4">
                    <p className="text-sm font-medium text-gray-700">题目解析</p>
                    <p className="mt-1 text-gray-800">{question.analysis}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* 结果页设置模态框 */}
      {showResultSettings && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">练习结果页设置</h3>
              <button 
                onClick={() => setShowResultSettings(false)}
                className="text-gray-500 hover:text-gray-700"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">显示答对人数</label>
                <input
                  type="checkbox"
                  checked={showStats.correctCount}
                  onChange={() => setShowStats({...showStats, correctCount: !showStats.correctCount})}
                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
              </div>
              
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">显示击败率</label>
                <input
                  type="checkbox"
                  checked={showStats.beatRate}
                  onChange={() => setShowStats({...showStats, beatRate: !showStats.beatRate})}
                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
              </div>
              
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">显示排名</label>
                <input
                  type="checkbox"
                  checked={showStats.rank}
                  onChange={() => setShowStats({...showStats, rank: !showStats.rank})}
                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
              </div>
              
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">显示总正确率</label>
                <input
                  type="checkbox"
                  checked={showStats.totalAccuracy}
                  onChange={() => setShowStats({...showStats, totalAccuracy: !showStats.totalAccuracy})}
                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
              </div>
              
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">显示总击败率</label>
                <input
                  type="checkbox"
                  checked={showStats.totalBeatRate}
                  onChange={() => setShowStats({...showStats, totalBeatRate: !showStats.totalBeatRate})}
                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
              </div>
              
              <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">显示排行榜</label>
                <input
                  type="checkbox"
                  checked={showStats.leaderboard}
                  onChange={() => setShowStats({...showStats, leaderboard: !showStats.leaderboard})}
                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                />
              </div>
              
              <div className="flex justify-end space-x-4 pt-4">
                <button
                  onClick={() => setShowResultSettings(false)}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  取消
                </button>
                <button
                  onClick={() => setShowResultSettings(false)}
                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
                >
                  保存设置
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 习题分析模态框 */}
      {showQuestionAnalysis && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-6xl max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">习题分析 - 合规基础专项练习</h3>
              <button 
                onClick={() => setShowQuestionAnalysis(false)}
                className="text-gray-500 hover:text-gray-700"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            
            <div className="mb-4 flex justify-between items-center">
              <div className="flex space-x-2">
                <select className="border rounded px-3 py-1 text-sm">
                  <option>全部题目</option>
                  <option>答对的题目</option>
                  <option>答错的题目</option>
                  <option>未做的题目</option>
                </select>
                <button className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">
                  导出分析数据
                </button>
              </div>
              <div className="text-sm text-gray-600">
                共 {questionAnalysis.length} 道题，正确率 80%
              </div>
            </div>
            
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">题号</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">题目内容</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">正确率</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">平均用时</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">难度</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {questionAnalysis.map(question => (
                    <tr key={question.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {question.id}
                      </td>
                      <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">
                        {question.content}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        75%
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {question.timeSpent}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        中等
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button className="text-blue-600 hover:underline">详情</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            
            <div className="flex items-center justify-between mt-4">
              <div className="text-sm text-gray-500">
                显示 <span className="font-medium">1</span> 到 <span className="font-medium">{questionAnalysis.length}</span> 条
              </div>
              <div className="flex space-x-2">
                <button className="px-3 py-1 border rounded text-sm disabled:opacity-50" disabled>
                  上一页
                </button>
                <button className="px-3 py-1 bg-blue-600 text-white rounded text-sm">
                  1
                </button>
                <button className="px-3 py-1 border rounded text-sm hover:bg-gray-50">
                  下一页
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}


//办证模拟考试
function DailyLearningContent() {
  
  const searchParams = useSearchParams();
  
  const province = decodeURIComponent(searchParams.get('sheng') || "");
  const cityName = decodeURIComponent(searchParams.get('city') || "");

  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [fileError, setFileError] = useState<string>("");
  const [showModal, setShowModal] = useState(false);
  const [modalMessage, setModalMessage] = useState("");
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {

    setFileError("");
    setPreviewImage(null);

    if (!e.target.files?.[0]) {
      setFileError("请选择有效的图片文件");
      return;
    }

    const file = e.target.files[0];

    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      showErrorModal("请上传图片文件（JPG/PNG等）");
      return;
    }

    // 检查文件大小
    if (file.size < 20 * 1024 || file.size > 150 * 1024) {
      showErrorModal("图片大小应在20KB-150KB之间");
      return;
    }

    // 检查文件名
    const fileName = file.name.split('.')[0];
    const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
    if (!idCardRegex.test(fileName)) {
      showErrorModal("请使用身份证号命名图片文件（如：11010119900307567X.jpg）");
      return;
    }

    // 创建预览
    const reader = new FileReader();
    
    reader.onload = (loadEvent) => {
      try {
        if (!loadEvent.target?.result) {
          throw new Error("文件读取失败");
        }

        const result = loadEvent.target.result as string;
        const img = new Image();
        
        img.onload = () => {
          const targetRatio = 33 / 23; // 标准高宽比
          const actualRatio = img.height / img.width;
          
          if (Math.abs(actualRatio - targetRatio) > 0.1) {
            throw new Error("图片比例应为33mm(高)×23mm(宽)，当前比例不符合要求");
          }
          
          setPreviewImage(result);
        };
        
        img.onerror = () => {
          throw new Error("图片加载失败");
        };
        
        img.src = result;
        
      } catch (error) {
        const message = error instanceof Error ? error.message : "未知错误";
        showErrorModal(message);
        if (fileInputRef.current) fileInputRef.current.value = "";
      }
    };
    
    reader.onerror = () => {
      showErrorModal("文件读取失败");
      if (fileInputRef.current) fileInputRef.current.value = "";
    };
    
    reader.readAsDataURL(file);

    reader.onload = (loadEvent) => {
      try {
        const result = loadEvent.target?.result as string;
        setPreviewImage(result);
        
        // 关键修复：将 Base64 数据保存到 formData
        setFormData(prev => ({
          ...prev,
          photo: result, // 保存 Base64 数据
          stuIdnumber: fileName // 自动填充身份证号（根据文件名）
        }));
        
      } catch (error) {
        // ...错误处理...
      }
    };
    // reader.readAsDataURL(file);
    
  };

  const showErrorModal = (message: string) => {
    setModalMessage(message);
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setModalMessage("");
  };

  const triggerFileInput = () => {
    fileInputRef.current?.click();
  };

  const clearFileInput = (e: React.MouseEvent) => {
    e.stopPropagation();
    setPreviewImage(null);
    setFileError("");
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  const [formData, setFormData] = useState({
    stuName: "",
    stuIdnumber: "",
    workplace: "",
    stuPhone: "",
    teacher: "",
    photo: "",
    endDate: "",
    startDate: "",
    place: "",
    institution: "",
    region: province,
    city:cityName,
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { id, value } = e.target;
    setFormData(prev => ({ ...prev, [id]: value }));

  };

  const handleSave = async (e: React.FormEvent, action: "save" | "update") => {
    e.preventDefault();

    //  检查必填字段
      if (!formData.photo) {
        showErrorModal("请上传照片");
        return;
      }

    try {
      const response = await fetch('http://192.168.1.219:8080/student/add', {
        method: 'POST',
        mode: 'cors',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...formData, action, photoBase64: formData.photo.split(',')[1]  }),
      });

      if (!response.ok) {
        throw new Error('网络响应异常');
      }
  
      // 3. 处理成功响应
      const result = await response.json();
      showErrorModal(action === "save" ? '数据保存成功！' : '数据修改成功！');
      console.log('操作成功:', result);

    } catch (error) {
      // 4. 处理错误
      const message = error instanceof Error ? error.message : '操作失败，请重试';
      showErrorModal(message);
      console.error('操作出错:', error);
    }
  };

  return (
    <main className="min-h-screen">
            {/* 错误提示弹窗 */}
      {showModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 max-w-md w-full">
            {/* <h3 className="text-lg font-bold mb-4">上传失败</h3> */}
            <p className="mb-6">{modalMessage}</p>
            <div className="flex justify-end">
              <button
                onClick={closeModal}
                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
              >
                确定
              </button>
            </div>
          </div>
        </div>
      )}

      <section className="py-20 pt-8">
        <div className="container mx-auto px-4 -mt-10 -ml-10">
          <div className="md:col-span-2">
            <div className="bg-white rounded-lg shadow-sm p-8">
              <form className="space-y-6 " >
                <div className="flex items-center" >
                  <label htmlFor="certificate-number" className="block text-sm font-medium mb-2 mr-4">
                    姓&emsp;&nbsp;&emsp;名<span className="text-red-600">*</span>  &emsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <input 
                    type="text"
                    id="stuName"
                    className="flex-grow px-4 py-2 border rounded-md"
                    placeholder="请输入姓名"
                    required
                    onChange={handleInputChange} // 添加这行
                    value={formData.stuName}    // 添加这行
                  />
                </div>
                <div className="flex items-center">
                  <label htmlFor="name" className="block text-sm font-medium mb-2 mr-4">
                    身份证号 <span className="text-red-600">*</span>&emsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <input
                    type="text"
                    id="stuIdnumber"
                    className="flex-grow px-4 py-2 border rounded-md"
                    placeholder="请输入身份证号"
                    required
                    onChange={handleInputChange} // 添加这行
                    value={formData.stuIdnumber}    // 添加这行
                  />
                </div>
                <div className="flex items-center">
                  <label htmlFor="name" className="block text-sm font-medium mb-2 mr-4">
                    工作单位<span className="text-red-600">*</span> &emsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <input
                    type="text"
                    id="workplace"
                    className="flex-grow px-4 py-2 border rounded-md"
                    placeholder="请输入工作单位"
                    required
                    onChange={handleInputChange} // 添加这行
                    value={formData.workplace}    // 添加这行
                  />
                </div>
                <div className="flex items-center">
                  <label htmlFor="name" className="block text-sm font-medium mb-2 mr-4">
                    手机号码 <span className="text-red-600">*</span>&emsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <input
                    type="text"
                    id="stuPhone"
                    className=" px-4 py-2 border rounded-md flex-grow"
                    placeholder="请输入本人手机号码"
                    required
                    onChange={handleInputChange} // 添加这行
                    value={formData.stuPhone}    // 添加这行
                  />
                </div>
                <div className="flex items-center">
                  <label htmlFor="name" className="block text-sm font-medium mb-2 mr-4">
                  班主任(招生老师)<span className="text-red-600">*</span>
                  </label>
                  <input
                    type="text"
                    id="teacher"
                    className=" px-4 py-2 border rounded-md flex-grow"
                    placeholder="请输入班主任（招生老师）姓名"
                    required
                    onChange={handleInputChange} // 添加这行
                    value={formData.teacher}    // 添加这行
                  />
                </div>
                 {/* 上传照片*/}
                <div className="flex items-start">
                  <label htmlFor="photo-upload" className="block text-sm font-medium mb-2 mr-4 whitespace-nowrap">
                    上传照片<span className="text-red-600">*</span>&emsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  </label>
                  <div className="flex-grow">
                    <input
                      type="file"
                      id="photo"
                      ref={fileInputRef}
                      accept="image/jpeg,image/png"
                      className="hidden"
                      // required
                      onChange={handleImageChange}
                      
                    />
                    
                {/* 照片上传部分 */}
                <div className="flex items-start">
                
                  <div className="flex-grow">
                   
                    {/* 样图展示 */}
                    <div className="mb-4 p-2 border rounded bg-gray-50  ">
                      <h4 className="text-sm font-medium mb-2 text-red-600">照片要求样图：</h4>
                      <div className="flex items-center flex px-4">
                        <div>
                          <div className="w-24 h-32 bg-white flex items-center justify-center ml-5">
                          <img 
                            src="/zhengjianzhao.jpg" 
                            className="w-24 h-32 object-cover border border-gray-300 " 
                            alt="证件照"
                          />
                          </div>
                          <p className="text-xs text-center mt-1">11010119900307567X.jpg</p>
                        </div>
                        <div className="mr-4">
                          <div className="w-24 h-32 bg-white border border-gray-300 flex items-center justify-center">
                            <span className="text-xs text-gray-500">33mm×23mm</span>
                          </div>
                          <p className="text-xs text-center mt-1">标准尺寸</p>
                        </div>
                     
                          {/* 上传区域 */}
                          <div 
                            onClick={triggerFileInput}
                            className="w-40 h-32 bg-white border border-gray-300 flex items-center justify-center -mt-5 ml-4 border-2 border-dashed rounded-md cursor-pointer hover:bg-gray-50"
                          >
                            {previewImage ? (
                              <div className="relative">
                                <img 
                                  src={previewImage} 
                                  alt="预览" 
                                  className="h-32 object-contain border border-gray-200"
                                />
                                <button 
                                  type="button"
                                  onClick={clearFileInput}
                                  className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center"
                                >
                                  ×
                                </button>
                              </div>
                            ) : (
                              <>
                                <svg className="w-8 h-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <p className="text-sm text-gray-600">点击上传照片</p>
                              </>
                            )}
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
                    
                    {/* 错误提示 */}
                    {fileError && (
                      <p className="text-sm text-red-600 mt-1">{fileError}</p>
                    )} 
                    {/* 说明文字 */}
                    <div className="text-xs text-gray-500 mt-2 space-y-1">
                      <p><strong>照片要求：</strong></p>
                      <p>1. 尺寸：33mm(高)×23mm(宽)，白底，人像清晰</p>
                      <p>2. 大小：20KB-150KB之间</p>
                      <p>3. 格式：JPG/PNG格式</p>
                      <p>4. 命名：使用身份证号命名（如：11010119900307567X.jpg）</p>
                      <p>5. 免冠证件照，不可使用生活照、自拍照</p>
                      <p className="text-red-600">特别提示：上传照片，颁发证书使用。</p>
                    </div>
                   </div>
                </div>
                <div className="flex">
                  <button 
                    type="button" // 注意：这里用 type="button" 而不是 type="submit"
                    onClick={(e) => handleSave(e, "save")}
                    className="w-full bg-primary text-white py-2 rounded-md hover:bg-primary/90 mr-2"
                  >
                    提交
                  </button>
                  {/* <button 
                    type="button" // 注意：这里用 type="button" 而不是 type="submit"
                    onClick={(e) => handleSave(e, "update")}
                    className="w-full bg-primary text-white py-2 rounded-md hover:bg-primary/90"
                  >
                    修改信息（提交）
                  </button> */}
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}

//证书查询
function CertificateQueryContent() {
  return (
    <div className="-ml-6">
      <h1 className="text-2xl font-bold mb-6">证书查询</h1>
      <form className="space-y-6">
        <div>
          <label className="block text-sm font-medium mb-2">证书编号/身份证号</label>
          <input
            type="text"
            className="w-full px-4 py-2 border rounded-md"
            placeholder="请输入身份证号或证书编号"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">姓名</label>
          <input
            type="text"
            className="w-full px-4 py-2 border rounded-md"
            placeholder="请输入姓名"
          />
        </div>
        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition">
          查询
        </button>
      </form>
    </div>
  );
}

//证书补发
function CertificateBufaContent() {
  return (
    <div className="-ml-6">
      <h1 className="text-2xl font-bold mb-6">证书补发</h1>
      <form className="space-y-6">
        <div>
          <label className="block text-sm font-medium mb-2">姓名</label>
          <input
            type="text"
            className="w-full px-4 py-2 border rounded-md"
            placeholder="请输入姓名"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">证书编号/身份证号</label>
          <input
            type="text"
            className="w-full px-4 py-2 border rounded-md"
            placeholder="请输入身份证或证书编号"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">补发原因</label>
          <input
            type="text"
            className="w-full px-4 py-2 border rounded-md"
            placeholder="请输入补发原因"
          />
        </div>
        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition">
          提交
        </button>
      </form>
    </div>
  );
}